<!doctype html>
<html lang="en">
	<head>
		<meta charset= "utf-8"/>
		<title>Final Project - Space and Earth Exploration</title>
		<script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
		<script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
		<script src="scripts/scripts.js" language="javascript"></script>
		<link href="styles/styles.css" rel="stylesheet" type="text/css"/>

	</head>
	
	<body onLoad="javascript:visitMoonpage3()">
		
			<div id="logo">
			<div><img  src="images/mastermindlogo1.png" width="230px" alt="The logo" title="The logo"/></div>
			</div><br>
	
			<header><img src="images/moon-phases-header.png" alt="Moon Phases Header" title="Moon Phases Header"/></header><br/><br/>
		
		<section>
	    	<div id="container">
		  
				  <div id="leftBar">
				  	<nav>
				    	<div class="barbuttons"><a href= "home-page.html">Home</a></div><br/>
	    				<div class="barbuttons"><a href= "moon-page1.html">Moon</a></div><br/>
	    				<div class="barbuttons"><a href= "sun-page1.html">Sun</a></div><br/>
						<div class="barbuttons"><a href="earth-page1.html" >Earth</a></div><br>
					 	<br/>
					 	<div id="test-Link" ><a href="final-test.html"><strong>TEST</strong></a></div>
					 	</nav><br/>
				</div>
				  
				  <div id="content">
				  <h1>Phases of the Moon</h1><br/>
				  	<div id="pics">
				  	<img src="images/moon-phases-diagram.jpg" width="460px" height="300px" alt="Moon Phases Image1" title="Moon Phases Image1"/>
				  	
				  	</div>
				    	<p>The moon’s position changes daily. 
				    	It takes about 29 days for the moon to orbit the earth. 
				    	The moon has several phases and these phases are a result of the different “faces” that are seen from the earth. 
				    	The moon’s phases are highly predictable because it  is an observed pattern. There are eight visible phases of the moon. 
				    	They are the new moon, waxing crescent moon, first quarter moon, waxing gibbous moon, full moon, waning gibbous moon, last quarter moon, and the waning crescent moon. 
				    	<img class="m2-image" src= "images/phases-of-moon.jpg" width="200px" broder="solid white" alt="Moon Phases Image2" title="Moon Phases Image2"/>

				    	Most of these phases can be paired in such a way that one phase is the exact opposite of the other phase. 
				    	The waxing moon means “growing.” In this phase, more of the moon is shown. 
				    	The waning moon means “shrinking.” In this phase, less of the moon is shown. 
				    	It is easier to remember the four main phases. They are new moon, waxing moon, waning moon and full moon.
				    	</p>
				    	
				  </div>
				  
				   <div id="rightBar2">
							
							<aside>
							<header>
								<p id="aside-title-audio">Audio</p>
							</header>
								<audio id="narration2" controls="controls">
									<source src="audio/phasesofthemoon.mp3" type="audio/mp3">
									<source src="audio/phasesofthemoon.ogg"type="audio/ogg">
								</audio><br/>
								
							<header>
								<p id="aside-title-audio">Transcript</p>
							</header>
							<div id="transcript">
						<p>It takes 29 days for the moon to orbit the earth. This orbiting causes the phases of the moon. When the moon orbits the earth, the sun illuminates one side of the moon. The other side remains dark because the earth blocks sunlight in this area. There are eight phases of the moon, but is easier to remember the four main phases: new moon, full moon waning moon and waxing moon.
						</p>
					</div>		
				</aside><br/><br/><br/>
				
					
				  </div>
  
				
				 
					<div id="footer"><br/>
						    <a class="movingButtons" href="moon-page2.html">Back</a>
						    <a class="movingButtons" href="moon-page4.html">Next</a>	    
					</div>
			
			</div>
		</section>	
						
	
	</body>

</html>